<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
    window.FBL = {};
    function isLeftClick(){return true};
    window.onload = function()
    {
        with(FBL)
        {
            var parentNode = document.getElementById("out");
            
            // --------------------------------------------------------------
            // DomPlate test goes here
            // --------------------------------------------------------------
            
            var treeData = {"menu":{"appetizers":[{"name":"some yummy appetizer","prize":{"ammount":8,"currency":"EUR"}},{"name":"a not so yummy soup","prize":{"ammount":5,"currency":"EUR"}}],"main-meals":[{"name":"bunny leg with fries and ketchup","prize":{"ammount":13,"currency":"EUR"}},{"name":"bunny stew","prize":{"ammount":12,"currency":"EUR"}}]},"owners":[{"last-name":"Hunter","first-name":"Bunny"}],"name":"Le lupin","cooks":[{"last-name":"Pits","first-name":"Sweaty"}],"address":{"street":"some french street","zip-code":"123456","city":"some french city","country":"some french country"},"waiters":[{"last-name":"Cheeks","first-name":"Rosy"}]};
                        
            var tree = domplate(
            {
              tag:
                TABLE({onclick: "$onClick"},
                  TBODY(
                    FOR("member", "$object|memberIterator",
                      TAG("$row", {member: "$member"}))
                  )
                ),
            
              row:
                TR({"class": "treeRow", $hasChildren: "$member.hasChildren",
                    _repObject: "$member", level: "$member.level"},
                  TD({style: "padding-left: $member.indent\\px"},
                    DIV({"class": "treeLabel"},
                        "$member.name")
                  ),
                  TD(
                    DIV("$member.label")
                  )
                ),
            
              loop:
                FOR("member", "$members",
                  TAG("$row", {member: "$member"})),
            
              memberIterator: function(object)
              {
                return this.getMembers(object);
              },
            
              onClick: function(event)
              {
                if (!isLeftClick(event))
                  return;
            
                var row = getAncestorByClass(event.target, "treeRow");
                var label = getAncestorByClass(event.target, "treeLabel");
                if (label && hasClass(row, "hasChildren"))
                  this.toggleRow(row);
              },
            
              toggleRow: function(row)
              {
                var level = parseInt(row.getAttribute("level"));
            
                if (hasClass(row, "opened"))
                {
                  removeClass(row, "opened");
            
                  var tbody = row.parentNode;
                  for (var firstRow = row.nextSibling; firstRow;
                       firstRow = row.nextSibling)
                  {
                    if (parseInt(firstRow.getAttribute("level")) <= level)
                      break;
                    tbody.removeChild(firstRow);
                  }
                }
                else
                {
                  setClass(row, "opened");
            
                  var repObject = row.repObject;
                  if (repObject) {
                    var members = this.getMembers(repObject.value, level+1);
                    if (members)
                      this.loop.insertRows({members: members}, row);
                  }
                }
              },
            
              getMembers: function(object, level)
              {
                if (!level)
                  level = 0;
            
                var members = [];
                for (var p in object)
                  members.push(this.createMember(p, object[p], level));
            
                return members;
              },
            
              createMember: function(name, value, level)
              {
                var hasChildren = (typeof(value) == "object");
                return {
                  name: name,
                  label: hasChildren ? "" : value,
                  value: value,
                  level: level,
                  indent: level*16,
                  hasChildren: hasChildren
                };
              }
            });
            
            tree.tag.replace({object: treeData}, parentNode, tree);

            // --------------------------------------------------------------
        }    
    }    
  </script>
  <script src="../../content/firebug/domplate.js" type="text/javascript"></script>
  <style type="text/css">
    .treeRow.hasChildren .treeLabel {
        background-image: url(http://fbug.googlecode.com/svn/trunk/lite/1.3/skin/classic/tree_open.gif);
        background-repeat: no-repeat;
        background-position: 2px 2px;
    }
    
    .treeRow.hasChildren.opened .treeLabel {
        background-image: url(http://fbug.googlecode.com/svn/trunk/lite/1.3/skin/classic/tree_close.gif);
    }
    
    .treeRow .treeLabel {
        padding-left: 18px;
        padding-right: 10px;
        white-space: nowrap;
    }
    
    .treeRow.hasChildren .treeLabel:hover {
        color: blue;
        cursor: pointer;
        text-decoration: underline;
    }
  </style>
  </head>
  <body>
  
  <h1 id="header">DomPlate Test</h1>
  <div id="comment"><i>This is just a test file</i><hr/></div>
  <div id="out"></div>

  </body>
</html>
